<!-- 记录 -->
<template>
    <div class="record_page coop_table">
        <!-- Tabs -->
        <div class="tabs">
            <scroll-view direction="horizontal">
                <span class="tabs_item" :class="{ 'active_tab': activeTab == index }" @click="changeTab(index)"
                    v-for="(item, index) in titleArr" :key="index">{{ t(item.title) }}</span>
            </scroll-view>
        </div>
        <TabForm :formParams="state.formParams" :form-params-list="state.formParamsList" :loading="state.loading"
            @sendSeach="sendSeach" :columns="state.columns" :data="state.data" :pageData="state.pageData"
            @page-Change="(p: any) => queryData(p)">
        </TabForm>
        <!-- <router-view></router-view> -->
        <!-- 弹窗 -->
        <ModalDialog secClass="form_card_big" v-model:visible="state.showModal" :title="state.moduleTitle">
            <template #content>
                <GameRecordReview :select-item="state.selectItem" :modal-type="state.modalType" />
            </template>
        </ModalDialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, computed, watch, onMounted, h } from 'vue';
import { useI18n } from "vue-i18n";
import TabForm from '@/components/TabForm.vue'
import { WithdrawStatusMap, CurrencyMap, RechagreStatusMap, FasterDateMap } from '@/enums/walletEnum';
import { NetPacket } from '@/netBase/NetPacket';
import H5Websocket from "@/net/Net1";
import { NetMsgType } from '@/netBase/NetMsgType';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { convertDateToObject, convertObjectToDateString } from '@/utils/dateTime';
import { WashTypeMap, ProxyAccountTypeMap, PlatformValueMap, WalletTypeMap, AuditStatusMap } from "@/enums/walletEnum"
import { useRoute } from "vue-router";
import { timeCalc } from '@/utils/publicMethods';
import { Session } from '@/utils/storage';
import pinia from "@/store/index";
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import { Message } from "@/utils/discreteApi";
import ModalDialog from '@/components/ModalDialog.vue';
import GameRecordReview from './gameRecordReview/index.vue';


const { settings } = storeToRefs(Page(pinia));
const { t, locale } = useI18n()
const route = useRoute();


const publicScorpion = (data: any, hasAll?: boolean) => {
    let arr = []
    hasAll && arr.push({ value: 9, label: t('rechargeRecord_page_allState') })
    for (const key in data) {
        let ojb = {
            label: data[key],
            value: Number(key)
        }
        arr.push(ojb)
    }

    return arr
}
// 获取 充值 提现 方式
const wayMap: any = ref({})
const waysHandle = (rs: any) => {
    rs.rechargelist_by_paymenttype.forEach((item: any) => {
        wayMap[item.paymenttype] = item.payname
    })
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, null,);
}
// 充值状态下拉
const rechagreStatusOptions: any = computed(() => publicScorpion(RechagreStatusMap(), true))
// 货币下拉
const currencyOptions = computed(() => publicScorpion(CurrencyMap()))
// 时间快捷项参数
const fasterDateOptions = computed(() => publicScorpion(FasterDateMap()))

const noNameList: any = ['SBO', 'CMD368', 'IM', 'VR', 'TCG', 'SABA', 'DG']
// 提款状态
const withdrawStatusOptions = computed(() => publicScorpion(WithdrawStatusMap(), true))

// 代理账变-筛选
const proxyRecordOptionsStatus = computed(() => publicScorpion(ProxyAccountTypeMap()))
// 流水记录-筛选
const auditOptionsStatus = computed(() => publicScorpion(AuditStatusMap()))

// 投注记录

const platformHandle = (rs: any) => { // 平台数据处理
    let platform = [{ value: 0, label: t('promo_page_all') }]
    let gameList = [{ value: '0', label: t('promo_page_all') }]
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_platform_gametype_list, null);
    rs.plat_rec_list.map((item: any) => {
        platform.push({ value: Number(item), label: PlatformValueMap[item] })
    })
    rs.gtype_rec_list.map((item: string) => {
        let key = item
        try {
            key = PlatformValueMap[item.split('_')[0]] + '_' + item.split('_')[1]
            if (item.split('_')[2]) {
                key = key + '_' + item.split('_')[2]
            }
        } catch {

        }
        gameList.push({ value: item, label: t(key) })
    })
    // 所属游戏平台
    titleArr[2].formParamsList[0].options = platform
    // 游戏名称
    titleArr[2].formParamsList[1].options = gameList
}
// 账变
const allList: any = ref([])
const optionsStatus = computed(() => { // 状态
    const options: any = []
    allList.value.map((item: any) => {
        if (!options.find((a: any) => a.value == item.b_type)) {
            options.push({
                label: t('bType' + (item.b_type > 100 ? 101 : item.b_type)),
                value: Number(item.b_type)
            })
        }
    })
    options.unshift({ value: 0, label: t('accountsRecord_page_allType') })
    return options
})
// 洗码-筛选
const selfListIds: any = ref([])
const waterRecordOptionsStatus = computed(() => { // 类型
    const options = Object.keys(WashTypeMap()).map((key: string) => {
        return {
            label: WashTypeMap()[key],
            value: Number(key)
        }
    })
    selfListIds.value.forEach((item: any) => {
        if (item != 9999) {
            options.push({
                label: PlatformValueMap[item],
                value: Number(item)
            })
        }
    })
    options.unshift({ value: 0, label: t('accountsRecord_page_allType') })
    return options
})
// 充值colum
const recharTableHeader = computed(() => {
    return [
        {
            title: t('rechargeRecord_page_method'), key: 'way_id', align: 'center',
            render(row: any) {
                // 如果有奖金 属于优惠 没有则属于其他方式 
                return (row.way_id == 19999) ? t('deposit_page_discount') : (row.way_id && wayMap[row.way_id]) ? t(wayMap[row.way_id]) : row.way_id
            }
        },
        {
            title: t('accountsRecord_page_hb'), key: 'currency', align: 'center',
            render(_row: any) {
                return CurrencyMap()[1];
            }
        },
        {
            title: t('rechargeRecord_page_amount'), key: 'pay_money', align: 'center',
            render(row: any) {
                return row.bonus && Number(row['bonus']) > 0 ? Number(row['bonus']).toLocaleString() : Number(row.pay_money).toLocaleString()
            }
        },
        {
            title: t('auditRecord_page_state'), key: 'order_status', align: 'center',
            render(row: any) {
                const color = row.order_status == '1' ? 'green' : row.order_status == '-1' ? '#FABB2D' : 'red';
                return h('span', { style: `color: ${color}` }, RechagreStatusMap()[row.order_status]);
            }
        },
        {
            title: t('auditRecord_page_startTime'), key: 'pay_time', align: 'center',
            render(row: any) {
                return convertObjectToDateString(row.pay_time);
            }
        },
    ];
})
// 提款colum
const withdrawTableHeader = computed(() => {
    return [
        {
            title: t('withdrawRecord_page_wMethod'), key: 'way_id', align: 'center',
            render(row: any) {
                return h('span', row.way_id == 2 ? 'USDT' : t('api_bankcard_0'));
            }
        },
        {
            title: t('accountsRecord_page_hb'), key: 'currency', align: 'center',
            render(row: any) {
                return h('span', row['way_id'] == 2 ? 'USDT' : t('accountsRecord_page_dong'));
            }
        },
        {
            title: t('withdrawRecord_page_wAmount'), key: 'pay_money', align: 'center',
            render(row: any) {
                return h('span', Number(row.pay_money).toLocaleString());
            }
        },
        {
            title: t('auditRecord_page_state'), key: 'order_status', align: 'center',
            render(row: any) {
                const color = row.order_status == '2' ? 'green' : row.order_status == '1' ? '#FABB2D' : 'red';
                return h('span', { style: `color: ${color}` }, WithdrawStatusMap()[row.order_status]);
            }
        },
        {
            title: t('auditRecord_page_startTime'), key: 'pay_time', align: 'center',
            render(row: any) {
                return h('span', convertObjectToDateString(row.pay_time));
            }
        },
    ];
});
// 投注colum
const betTableHeader = computed(() => {
    return [
        {
            title: t('betRecord_page_platform'), key: 'platform_id', align: 'center',
            render(row: any) {
                return h('span', row.game_type.split('_')[0]);
            }
        },
        {
            title: t('betRecord_page_game'), key: 'game_type', align: 'center',
            render(row: any) {
                let str = row.game_type.split('_');
                let rs = '';
                if (noNameList.includes(str[0]) && !str[1]) {
                    rs = str[0];
                } else {
                    rs = row.platform_id + '_' + str[1];
                    if (str[2]) {
                        rs += '_' + str[2];
                    }
                    rs = t(rs);
                }
                return h('span', rs);
            }
        },
        {
            title: t('betRecord_page_betAmount'), key: 'bet_total', align: 'center',
            render(row: any) {
                return h('span', { style: { width: '50px', display: 'inline-block' } }, Math.abs(row.bet_total).toLocaleString());
            }
        },
        {
            title: t('betRecord_page_winLose'), key: 'net_value', align: 'center',
            render(row: any) {
                const color = Number(row.net_value) > 0 ? '#80FF44' : '#FF2424';
                return h('span', { style: { color: color, width: '40px', display: 'inline-block' } }, Number(row.net_value).toLocaleString());
            }
        },
        {
            title: t('betRecord_page_betNumber'), key: 'bet_number', align: 'center',
            render(row: any) {
                return h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, [
                    h('span', {
                        style: {
                            flex: '1',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            marginRight: '8px',
                            width: '80px'
                        }
                    }, row.balance_time),
                    h('button',
                        {
                            style: {
                                cursor: 'pointer',
                                border: 'none',
                                backgroundColor: '#5398FF',
                                color: '#FFFFFF',
                                padding: '2px 4px',
                                borderRadius: '4px',
                                fontSize: '12px',
                                flexShrink: '0', // 防止按钮被压缩
                            },
                            onClick: () => {
                                navigator.clipboard.writeText(row.balance_time).then(() => {
                                    Message.success(t('proxy_page_copyFinish'))
                                }).catch(() => {
                                    Message.error(t('proxy_page_copyFail'))
                                });
                            }
                        },
                        t('Copy')
                    )
                ]);
            }
        },
        {
            title: t('betRecord_page_playNumber'), key: 'play_number', align: 'center',
            render(row: any) {
                return h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, [
                    h('span', {
                        style: {
                            flex: '1',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            marginRight: '8px'
                        }
                    }, row.play_number),
                    h('button',
                        {
                            style: {
                                cursor: 'pointer',
                                border: 'none',
                                backgroundColor: '#5398FF',
                                color: '#FFFFFF',
                                padding: '2px 4px',
                                borderRadius: '4px',
                                fontSize: '12px',
                                flexShrink: '0',
                            },
                            onClick: () => {
                                navigator.clipboard.writeText(row.play_number).then(() => {
                                    Message.success(t('proxy_page_copyFinish'))
                                }).catch(() => {
                                    Message.error(t('proxy_page_copyFail'))
                                });
                            }
                        },
                        t('Copy')
                    )
                ]);
            }
        },
        {
            title: t('betRecord_page_settlement'), key: 'balance_time', align: 'center',
            render(row: any) {
                return convertObjectToDateString(row.balance_time);
            }
        },
        {
            title: t('betRecord_page_record'), key: 'record', align: 'center',
            render(row: any) { // todo 记录渲染条件，有数据后问产品
                return h('span', row.record);
            }
        },
        {
            title: t('betRecord_page_handrecord'),
            key: 'hand_record',
            align: 'center',
            render(row: any) {
                return h('span',
                    {
                        style: {
                            color: '#4B9EFF',
                            textDecoration: 'underline',
                            cursor: 'pointer',
                            whiteSpace: 'nowrap'
                        },
                        onClick: () => {
                            // 添加点击事件逻辑
                            state.showModal = true
                            state.modalType = 1
                            state.moduleTitle = 'betRecord_page_handrecord'
                            state.selectItem = row
                        }
                    },
                    t('betRecord_page_check') // "查看" 两字
                );
            }
        },
        {
            title: t('betRecord_page_gamereplay'),
            key: 'game_replay',
            align: 'center',
            render(row: any) {
                return h('span',
                    {
                        style: {
                            color: '#4B9EFF',
                            textDecoration: 'underline',
                            cursor: 'pointer',
                            whiteSpace: 'nowrap'
                        },
                        onClick: () => {
                            // 添加点击事件逻辑
                            state.showModal = true
                            state.modalType = 0
                            state.moduleTitle = 'betRecord_page_gamereplay'
                            state.selectItem = row
                        }
                    },
                    t('betRecord_page_play') // "查看" 两字
                );
            }
        }
    ];
});
// 账变colum
const accountingChangeTableHeader = computed(() => {
    return [
        {
            title: t('accountsRecord_page_type'), key: 'b_type', align: 'center',
            render(row: any) {
                let rs = '';
                let val = row.b_type;
                if (row['remark'] && t('bType' + row['remark']) && t('bType' + row['remark']) != ('bType' + row['remark'])) {
                    rs = t('bType' + row['remark']);
                } else {
                    rs = t('bType' + (val > 100 ? 101 : val));
                }
                return h('span', rs);
            }
        },
        {
            title: t('accountsRecord_page_hb'), key: 'currency', align: 'center',
            render(row: any) {
                return h('span', row['way_id'] == 2 ? 'USDT' : t('accountsRecord_page_dong'));
            }
        },
        {
            title: t('accountsRecord_page_amount'), key: 'pay_money', align: 'center',
            render(row: any) {
                return h('span', (row.type == 2 ? '-' : '+') + Number(row.pay_money).toLocaleString());
            }
        },
        {
            title: t('accountsRecord_page_content'), key: 'item', align: 'center',
            render(row: any) {
                let rs = '';
                let val = row.item;
                if (val == 3) {
                    rs = row['pay_money'] > 0 ? WalletTypeMap()['3_0'] : WalletTypeMap()['3_1'];
                } else {
                    rs = WalletTypeMap()[val];
                }
                return h('span', rs);
            }
        },
        {
            title: t('accountsRecord_page_time'), key: 'create_time', align: 'center',
            render(row: any) {
                return h('span', convertObjectToDateString(row.create_time));
            }
        },
    ];
});
// 流水colum
const auditTableHeader = computed(() => {
    return [
        {
            title: t('auditRecord_page_audit'), key: 'title', align: 'center',
            render(row: any) {
                return h('span', t(row.title));
            }
        },
        {
            title: t('auditRecord_page_auditMon'), key: 'amount', align: 'center',
            render(row: any) {
                return h('span', Number(row.amount).toLocaleString());
            }
        },
        {
            title: t('auditRecord_page_auditProgress'), key: 'progess', align: 'center',
            render(row: any) {
                return h('span', Number(row.progess).toLocaleString());
            }
        },
        {
            title: t('auditRecord_page_state'), key: 'type', align: 'center',
            render(row: any) {
                return h('span', AuditStatusMap()[row.type]);
            }
        },
        {
            title: t('auditRecord_page_startTime'), key: 'create_time', align: 'center',
            render(row: any) {
                return h('span', convertObjectToDateString(row.create_time));
            }
        },
    ];
});
// 洗码colum
const waterRecordTableHeader = computed(() => {
    return [
        {
            title: t('washRecord_page_plat'), key: 'type', align: 'center',
            render(row: any) {
                let rs = '';
                let val = row.type;
                rs = val == 9999 ? t('washRecord_page_currPlat') : PlatformValueMap[val];
                return h('span', rs);
            }
        },
        {
            title: t('rechargeRecord_page_currency'), key: 'currency', align: 'center',
            render(row: any) {
                return h('span', row['way_id'] == 2 ? 'USDT' : t('accountsRecord_page_dong'));
            }
        },
        {
            title: t('washRecord_page_amount'), key: 'rebate', align: 'center',
            render(row: any) {
                return h('span', { style: 'color: #fac904' }, Number(row.rebate).toLocaleString());
            }
        },
        {
            title: t('washRecord_page_money'), key: 'bet_money', align: 'center',
            render(row: any) {
                return h('span', { style: 'color: #fac904' }, Number(row.bet_money).toLocaleString());
            }
        },
        {
            title: t('auditRecord_page_startTime'), key: 'create_time', align: 'center',
            render(row: any) {
                return h('span', convertObjectToDateString(row.create_time));
            }
        },
    ];
});
// 代理账变 colum
const proxyRecordTableHeader = computed(() => {
    return [
        {
            title: t('accountsRecord_page_type'), key: 'type', align: 'center',
            render: (row: any) =>
                h('span', t(row.type === 1 ? 'bType4' : 'Transfer')) // 1-提现 2-转账
        },
        {
            title: t('accountsRecord_page_hb'), key: 'currency', align: 'center',
            render: (row: any) =>
                h('span', row['way_id'] === 2 ? 'USDT' : t('accountsRecord_page_dong'))
        },
        {
            title: t('accountsRecord_page_amount'), key: 'pay_money', align: 'center',
            render: (row: any) =>
                h('span', (row.type === 1 ? '+' : '-') + Number(row.pay_money).toLocaleString())
        },
        {
            title: t('accountsRecord_page_content'), key: 'item', align: 'center',
            render: (row: any) => {
                let rs = '';
                let val = row.item;
                if (val === 3) {
                    rs = row['pay_money'] > 0 ? WalletTypeMap()['3_0'] : WalletTypeMap()['3_1'];
                } else {
                    rs = WalletTypeMap()[val];
                }
                return h('span', rs);
            }
        },
        {
            title: t('accountsRecord_page_time'), key: 'create_time', align: 'center',
            render: (row: any) =>
                h('span', convertObjectToDateString(row.create_time))
        },
    ];
});
const deviceMap: any = ref({ // deviceid=1表示web登录， 2表示安卓，3表示苹果，其它值就表示其它设备
    1: 'WEB',
    2: 'Android',
    3: 'IOS',
    4: t('else')
})
const typeMap: any = ref({
    3: t('loginRecord_page_typephone'),
    4: t('loginRecord_page_typeaccount'),
    5: t('loginRecord_page_typeemail')
})
// 登录记录 colum
const loginRecordTableHeader = computed(() => {
    return [ // 表头
        {
            title: t('loginRecord_page_device'), key: 'device_model', render(row: any) {
                return h('span', deviceMap.value[row.device_model] || '--');
            }
        },
        {
            title: t('loginRecord_page_date'), key: 'login_time', render(row: any) {
                return h('span', convertObjectToDateString(row.login_time));
            }
        },
        {
            title: t('loginRecord_page_address'), key: '_address', render(row: any) {
                return row.location || (Session.get('ips') && Session.get('ips')[row.ip])
            }
        },
        {
            title: t('loginRecord_page_way'), key: 'login_type', render(row: any) {
                return h('span', typeMap.value[row.login_type] || '--');
            }
        },
    ]
})

interface FormParams {
    [key: string]: any; // 允许任意属性
}
const state = reactive({
    loading: false,
    pageData: {
        page: 1,
        pageCount: 0,
        pageSize: 10
    } as any,
    formParams: <FormParams>{
        status: 9,
        date: 2, // 快捷日期
        date1: null, // 选择日期
        dateType: 1,
        currency: 0
    },
    // 各类输入框集合
    formParamsList: [],
    // 表格表头
    columns: [],
    // 表格数据
    data: [] as any,

    showModal: false,
    modalType: 1, //1: 牌局记录，0：牌局回放
    moduleTitle: 'betRecord_page_handrecord',
    selectItem: {},

})
const titleArr: any = reactive([
    // 充值记录配置
    {
        title: 'mine_myload',
        id: 1,
        type: 'recharge_record_list',
        sortText: 'pay_time', // 返回数据需要排序的时间字段
        loading: false,
        reqNetType: NetPacket.req_get_recharge_record_list,  // 发送得协议名
        reputation: NetMsgType.msgType.msg_notify_get_recharge_record_list, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            status: 9,
            date: 2, // 快捷日期
            // date1: null, // 选择日期
            dateType: 1,
            currency: 0,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 8,
                type: 'select',
                label: 'auditRecord_page_state',
                path: 'status',
                placeholder: 'addBank_page_pChoose',
                options: rechagreStatusOptions
            },
            {
                span: 8,
                type: 'select',
                label: 'rechargeRecord_page_currency',
                path: 'currency',
                placeholder: 'addBank_page_pChoose',
                options: currencyOptions
            },
            {
                span: 8,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // }
        ],
        // 表格表头
        columns: recharTableHeader,
        // 表格数据
        data: [],
    },
    // 提款记录配置
    {
        title: 'mine_mywithdraw',
        id: 2,
        type: 'withdraw_record_list',
        sortText: 'pay_time',
        reqNetType: NetPacket.req_get_withdraw_record_list,
        reputation: NetMsgType.msgType.msg_notify_get_withdraw_record_list, //监听得协议
        loading: false,
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            status: 9,
            date: 2, // 快捷日期
            currency: 0,
            // date1: timeCalc(2), // 选择日期
            number_per_page: 10,  //  每页的数量
            dateType: 1,
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 7,
                type: 'select',
                label: 'auditRecord_page_state',
                path: 'status',
                placeholder: 'addBank_page_pChoose',
                options: withdrawStatusOptions
            },
            {
                span: 8,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // }
        ],
        // 表格表头
        columns: withdrawTableHeader,
        // 表格数据
        data: [],
    },
    // 投注记录配置
    {
        title: 'mine_mybet',
        id: 3,
        type: 'bet_record_list',
        sortText: 'balance_time',
        loading: false,
        reqNetType: NetPacket.req_get_bet_record_list,
        reputation: NetMsgType.msgType.msg_notify_get_bet_record_list, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            platform_id: 0, //所属平台
            game_type: '0', // 游戏名称
            play_type: 0,    // 玩法
            // date1: timeCalc(2), // 选择日期
            date: 2, // 快捷日期
            dateType: 1,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 8,
                type: 'select',
                label: 'betRecord_page_platform',
                path: 'platform_id',
                placeholder: 'addBank_page_pChoose',
                options: []
            },
            {
                span: 8,
                type: 'select',
                label: 'betRecord_page_game',
                path: 'game_type',
                placeholder: 'addBank_page_pChoose',
                options: []
            },
            {
                span: 8,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // }
        ],
        // 表格表头
        columns: betTableHeader,
        // 表格数据
        data: [
            {
                platform_id: 'platform_1',
                game_type: 'slot_game_123',
                bet_total: 500,
                net_value: -200,
                bet_number: 'BET123456',
                balance_time: '2024-12-14 12:00:00',
            },
            {
                platform_id: 'platform_2',
                game_type: 'card_blackjack',
                bet_total: 1000,
                net_value: 350,
                bet_number: 'BET654321',
                balance_time: '2024-12-14 13:00:00',
            },
            {
                platform_id: 'platform_3',
                game_type: 'dice_game_789',
                bet_total: 750,
                net_value: 0,
                bet_number: 'BET789123',
                balance_time: '2024-12-14 14:00:00',
            },
            {
                platform_id: 'platform_4',
                game_type: 'sports_bet_456',
                bet_total: 1200,
                net_value: -500,
                bet_number: 'BET456789',
                balance_time: '2024-12-14 15:00:00',
            },
        ],
    },
    // 账变记录配置
    {
        title: 'mine_myaudit',
        id: 4,
        type: 'record_list',
        loading: false,
        sortText: 'create_time', // 返回数据需要排序的时间字段
        reqNetType: NetPacket.req_get_accounting_change_record_list,
        reputation: NetMsgType.msgType.msg_notify_get_accounting_change_record_list, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            type: 0,
            // date1: timeCalc(2), // 选择日期
            date: 2, // 快捷日期
            dateType: 1,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 10,
                type: 'select',
                label: 'accountsRecord_page_type',
                path: 'type',
                placeholder: 'addBank_page_pChoose',
                options: optionsStatus
            },
            {
                span: 8,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // }
        ],
        // 表格表头
        columns: accountingChangeTableHeader,
        // 表格数据
        data: [],
    },
    // 流水记录配置
    {
        title: 'records_page_auditRecord',
        id: 5,
        type: 'record_list',
        sortText: 'create_time', // 返回数据需要排序的时间字段
        loading: false,
        reqNetType: NetPacket.req_get_audit_record,
        reputation: NetMsgType.msgType.msg_notify_get_audit_record, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            date: 2, // 快捷日期
            // date1: null, // 选择日期
            type: 0,
            dateType: 1,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 10,
                type: 'select',
                label: 'accountsRecord_page_type',
                path: 'type',
                placeholder: 'addBank_page_pChoose',
                options: auditOptionsStatus
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // },
            {
                span: 6,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
        ],
        // 表格表头
        columns: auditTableHeader,
        // 表格数据
        data: [],
    },
    // 洗码记录配置
    {
        title: 'home_page_waterRecord',
        id: 6,
        type: 'record_list',
        sortText: 'create_time', // 返回数据需要排序的时间字段
        loading: false,
        reqNetType: NetPacket.req_get_vip_rebate,
        reputation: NetMsgType.msgType.msg_notify_get_vip_rebate, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            type: 0,
            date: 2, // 快捷日期
            // date1: null, // 选择日期
            dateType: 1,

            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 10,
                type: 'select',
                label: 'accountsRecord_page_type',
                path: 'type',
                placeholder: 'addBank_page_pChoose',
                options: waterRecordOptionsStatus
            },
            {
                span: 6,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'path',
            //     placeholder: 'addBank_page_pChoose',
            // },

        ],
        // 表格表头
        columns: waterRecordTableHeader,
        // 表格数据
        data: [],
    },
    // 代理账变记录配置
    {
        title: 'proxyRecord',
        id: 7,
        type: 'record_list',
        sortText: 'create_time', // 返回数据需要排序的时间字段
        loading: false,
        reqNetType: NetPacket.req_get_agent_accounting_change,
        reputation: NetMsgType.msgType.msg_notify_get_agent_accounting_change, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            type: 0,
            date: 2, // 快捷日期
            // date1: null, // 选择日期
            dateType: 1,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [
            {
                span: 10,
                type: 'select',
                label: 'accountsRecord_page_type',
                path: 'type',
                placeholder: 'addBank_page_pChoose',
                options: proxyRecordOptionsStatus
            },
            {
                span: 6,
                type: 'select',
                placeholder: 'home_page_select',
                path: 'date',
                options: fasterDateOptions
            },
            // {
            //     span: 16,
            //     type: 'daterange',
            //     label: 'auditRecord_page_time',
            //     path: 'date1',
            //     placeholder: 'addBank_page_pChoose',
            // }
        ],
        // 表格表头
        columns: proxyRecordTableHeader,
        // 表格数据
        data: [],
    },
    // 登录记录配置
    {
        title: 'home_page_loginRecord',
        id: 8,
        type: 'login_record_list',
        sortText: 'login_time',
        loading: false,
        reqNetType: NetPacket.req_login_record_list,
        reputation: NetMsgType.msgType.msg_notify_login_record_list, //监听得协议
        // 搜索条件
        formParams: {
            page: 1, // 当前页码
            dateType: 0,
            currency: 0,
            number_per_page: 10  //  每页的数量
        },
        // 各类输入框集合
        formParamsList: [

        ],
        // 表格表头
        columns: loginRecordTableHeader,
        // 表格数据
        data: [],
    },

])
// 搜索事件
const sendSeach = (params: any) => {
    state.formParams = params
    queryData()
}

const activeTab = ref(0)
const changeTab = (index: number) => {
    activeTab.value = index
    state.columns = titleArr[index].columns
    state.formParams = titleArr[index].formParams
    if (activeTab.value == 2) {
        state.formParams.page_num = 1
    }
    state.formParams.page = 1
    state.pageData.pageCount = 1
    state.formParamsList = titleArr[index].formParamsList
    state.data = []
    queryData()

}


const queryData = (page?: any) => { // 查询
    // 充值
    MessageEvent2.addMsgEvent(
        titleArr[activeTab.value].reputation, resultHandle,
    );
    if (activeTab.value == 2) {
        state.pageData.page_num = state.formParams.page_num = page || 1
    }
    state.pageData.page = state.formParams.page = page || 1
    // 发送请求
    const query = titleArr[activeTab.value].reqNetType()
    Object.assign(query, state.formParams)
    if (state.formParams.dateType == 1 && state.formParams.date) {
        Object.assign(query.start_time, convertDateToObject((timeCalc(state.formParams.date))[0]))
        Object.assign(query.end_time, convertDateToObject((timeCalc(state.formParams.date))[1], true))
    }
    if (state.formParams.dateType == 2 && state.formParams.date1) {
        Object.assign(query.start_time, convertDateToObject((state.formParams.date1)[0]))
        Object.assign(query.end_time, convertDateToObject((state.formParams.date1)[1], true))
    }
    state.loading = true
    H5Websocket.sendMessageHandler(query);
    if (activeTab.value == 2) {
        getPlatformData()
    }
}
const resultHandle = (rs: any) => { // 数据处理

    state.data = []
    state.loading = false                // 总条数
    state.pageData.pageCount = Math.ceil((rs.total_items / state.formParams.number_per_page) || 1)
    console.log('133333333333', rs)

    let type = titleArr[activeTab.value].type
    if (rs[type]?.length > 0) {
        if (type == 'recharge_record_list') {
            for (let index = 0; index < rs[type].length; index++) {
                if (rs[type][index].bonus > 0) {
                    let add = {
                        way_id: 19999,
                        order_status: rs[type][index].order_status,
                        pay_money: rs[type][index].bonus,
                        pay_time: rs[type][index].pay_time,
                    }
                    rs[type].splice(index + 1, 0, add)
                    rs[type][index].bonus = 0
                }

            }
        }
        state.data = (rs[type]).sort((a: any, b: any) => {
            return Date.parse(convertObjectToDateString(b[titleArr[activeTab.value].sortText])) - Date.parse(convertObjectToDateString(a[titleArr[activeTab.value].sortText]))
        })
    }

    if (type === 'accounting_change_record_list') {
        if (state.formParams?.type == 0) {
            allList.value = state.data
        }
    }
    // 账变记录类型
    if (activeTab.value == 3 && titleArr[activeTab.value].formParams.type == 0) {
        console.error('???===>>>')
        allList.value = rs.record_list || []
    }
    if (type === 'vip_rebate_record_list') {
        // 把id放到平台id里
        rs.record_list.forEach((item: any) => {
            if (!selfListIds.value.includes(item.type)) {
                selfListIds.value.push(item.type)
            }
        })
    }

    // 解析登录地点
    if (activeTab.value == 7) {
        getIPAddress(state.data)
    }
    // 充值
    MessageEvent2.removeMsgEvent(titleArr[activeTab.value].reputation, null);

}
const getIPAddress = async (data: any) => {
    let ips = Session.get('ips') || {}
    for (let index = 0; index < data.length; index++) {
        if (data[index].ip && !ips[data[index].ip]) {
            let response = await fetch(settings.value.geoip_api + data[index].ip)
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            let res = await response.json()
            if (res && res.data && res.data.country) {
                ips[data[index].ip] = `${res.data.city} ${res.data.region} ${res.data.country}`
                data[index].location = `${res.data.city} ${res.data.region} ${res.data.country}`
                Session.set('ips', ips)
            } else {

            }

        } else {
            data[index].location = ips[data[index].ip]
        }
    }
}
//获取所属平台数据
const getPlatformData = () => { // 获取平台数据
    MessageEvent2.addMsgEvent(
        NetMsgType.msgType.msg_notify_platform_gametype_list,
        platformHandle,
    );
    const query = NetPacket.req_platform_gametype_list()
    if (state.formParams.dateType == 1 && state.formParams.date) {
        Object.assign(query.start_time, convertDateToObject((timeCalc(state.formParams.date))[0]))
        Object.assign(query.end_time, convertDateToObject((timeCalc(state.formParams.date))[1], true))
    }
    if (state.formParams.dateType == 2 && state.formParams.date1) {
        Object.assign(query.start_time, convertDateToObject((state.formParams.date1)[0]))
        Object.assign(query.end_time, convertDateToObject((state.formParams.date1)[1], true))
    }
    H5Websocket.sendMessageHandler(query);
}
const getPays = () => {
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_req_get_shop_info, waysHandle,);
    const query = NetPacket.req_get_shop_info()
    H5Websocket.sendMessageHandler(query);
}
onMounted(() => {
    state.columns = titleArr[activeTab.value].columns
    state.formParamsList = titleArr[activeTab.value].formParamsList
    state.formParams = titleArr[activeTab.value].formParams
    if ([0, 1].includes(activeTab.value)) {
        getPays()
    }

    changeTab(Number(route.query.active) || 0)

    // if (activeTab.value == 2) {
    //     getPlatformData()
    // }
})

// watchEffect(() => {
//   // Ensure TabForm is updated when activeTab changes
//   const tab = titleArr[activeTab.value];
//   state.columns = tab.columns;
//   state.formParamsList = tab.formParamsList;
//   state.formParams = tab.formParams;
//   state.data = [];
//   queryData();
// });

watch(
    () => route.query.active,
    (newActive: any) => {
        if (newActive !== undefined) {
            activeTab.value = Number(newActive);
        }
    }
);
watch(locale, () => {
    // 触发表格重新渲染
    state.columns = [];
    setTimeout(() => {
        state.columns = titleArr[activeTab.value].columns
    }, 100);
});
</script>

<style lang='less' scoped>
@import '@/assets/recordPage.less';

.coop_table {
    .tabs {
        margin-bottom: 40px;
        border-radius: 14px;
        height: 40px;
        padding: 2px;
        background: #0D0E2E;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        cursor: pointer;

        .tabs_item {
            // min-width: 106px;
            padding: 9px 18px;
            color: #AEAEB0;
            height: 38px;
            box-sizing: border-box;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
        }

        .active_tab {
            color: #fff;
            // width: auto;
            border-radius: 8px;
            background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
            box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

        }


    }

}
</style>
